<template>
    <div id="box">
        <section id="category">
            <h1>
                <i class="el-icon-menu"></i>
                <span>商品分类</span>
            </h1>
            <hr />
            <Operate @changeCategoryName="valuationCategoryData" />
        </section>
        <section id="attr">
            <h1>
                <i class="el-icon-s-data"></i>
                <span v-if="categoryData !== null" >{{ categoryData.name }}</span>
                <span>规格属性</span>
            </h1>
            <hr />
            <Attr :data="categoryData"/>
        </section>
    </div>
</template>

<script>
    import Operate from './operate/Index.vue'
    import Attr from './attr/Index.vue'
    export default {
        name: 'Category',
        components: {
            Operate,
            Attr
        },
        data() {
            return {
                categoryData: {},
            }
        },
        methods: {
            valuationCategoryData(data) {
                this.categoryData = data
            }
        }
    }
</script>

<style scoped lang="less">
    #box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 2%;
        height: 100px !important;

        #category, #attr {
            border: 1px solid #D7DAE2;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 3%;
            box-sizing: border-box;
            height: auto;
            align-self: start;
        }
        #category {
            min-width: 450px;
        }
        #attr {
            min-width: 550px;
        }
    }
    h1 {
        margin: 0;
        margin-bottom: 20px;
        font-size: 1.3rem;
    }
    h1>span {
        margin-left: 10px;
    }
    hr {
        margin-bottom: 20px;
    }
</style>